<template>
	<view>
		<view class="fs30 fw_b p_col_20 p_row_20">
			按钮主题色
		</view>
		<view class="Between w_100">
			<u-radio-group  v-model="checkColor">
				<view class=" cview" v-for="(item,index) in color" :key="index">
					<u-radio :active-color="item" @change="checkboxChange(item)" :name="item">
						<view class="flex">
								<view class="colorview" :style="{ backgroundColor:`${item}` }"></view>
								<view class=" m_l_10" :style="{ color:`${item}` }">{{item}}</view>
						</view>
					</u-radio>
				</view>
			</u-radio-group>
		</view>
		<alert :mode="mode" :btnColor="checkColor" v-model="maskshow" :maskparam="maskparam" @clickbtn1='clickbtn1' @clickbtn2="clickbtn2"
			@finish='finish' @closealert='offmask' @offmask='offmask' @topay="offmask">
		</alert>
		<view v-for="(item,index) in alertList" :key="index">
			<view @click="showmodel(item)">
				{{item.title}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checkColor: "#1890FF",
				color: ["#1890FF","#73C0DE","#91CB74", "#EE6666","#3CA272","#FC8452","#9A60B4","#ea7ccc","#303030","#5755F8"],
				maskparam: {},
				mode: -1,
				maskshow: false,
				/*
					mode0 : 标题 文字和ICON的弹窗
					mode1 : 只有标题和文字的弹窗
					mode2 : 顶部带图弹窗
					mode3 : 拉起支付弹窗(带服务费/汇率)
					mode4 : 顶部图片+icon弹窗
					mode5 : 无金额显示 仅有输入密码的支付弹窗
					mode6 : 协议弹窗(使用scroll-view包裹 可传入富文本)
				*/
				alertList: [{
						mode: 0,
						title: "只有标题的弹窗",
						maskparam: {
							title: "是否开启优先打怪",
							text: "",
							icon: "",
							btn: ["再想想", "确认开启"]
						}
					},
					{
						mode: 0,
						title: "标题+文字的弹窗",
						maskparam: {
							title: "是否开启优先打怪",
							text: "开启优先打怪将消耗2%的积分",
							icon: "",
							btn: ["确定", "取消"]
						}
					},
					{
						mode: 0,
						title: "标题+文字+icon的弹窗",
						maskparam: {
							title: "提示",
							text: "优惠券使用成功!",
							icon: "/static/xuanFile/tubiao.png",
							baifenbi: 0,
							btn: ["确定", "取消"]
						}
					},
					{
						mode: 2,
						title: "游戏成功弹窗(顶部图片弹窗)",
						maskparam: {
							title: "恭喜你!本期游戏成功!",
							text: "现在可以预约下一期游戏哦~",
							icon: "/static/xuanFile/success.png",
							btn: ["不玩了", '预约下期']
						}
					},
					{
						mode: 2,
						title: "游戏失败弹窗(顶部图片弹窗)",
						maskparam: {
							title: "很遗憾,本期游戏失败!",
							text: "现在可以预约下一期游戏哦~",
							icon: "/static/xuanFile/defeat.png",
							btn: ["不玩了", '预约下期']
						}
					}, {
						mode: 3,
						title: "拉起支付弹窗(带服务费/汇率)",
						maskparam: {
							title: "请输入支付密码",
							text: "购买会员产品",
							baifenbi: 10,
							pwdmode: 4, // 1.打怪 2.兑换道具 3.预约 4.优先打怪 
							nuoli: 888,
						}
					},
					{
						mode: 4,
						title: "签到成功弹窗(顶部图片+icon弹窗)",
						maskparam: {
							title: "",
							text: "恭喜您,签到成功",
							icon: "/static/xuanFile/maskTop.png",
							icon2: "/static/xuanFile/maskIcon.png",
							btn: ["确定"]
						}
					},
					{
						mode: 5,
						title: "无金额显示 仅有输入密码的支付弹窗",
						maskparam: {
							title: "请输入支付密码",
							alerttext: "购买会员产品",
							pwdmode: 0, //  4.显示汇率 
						}
					},
					{
						mode: 6,
						title: "长文本弹窗",
						maskparam: {
							title: "提示",
							text: `一、总则
						1.1 本站的所有权和运营权归本公司所有。
						1.2 用户在注册之前，应当仔细阅读本协议，并同意遵守本协议后方可成为注册用户。一旦注册成功，则用户与本站之间自动形成协议关系，用户应当受本协议的约束。用户在使用特殊的服务或产品时，应当同意接受相关协议后方能使用。
						1.3 本协议则可由本站随时更新，用户应当及时关注并同意本站不承担通知义务。本站的通知、公告、声明或其它类似内容是本协议的一部分。
						
						二、服务内容
						2.1 本站的具体内容由本站根据实际情况提供。
						2.2 本站仅提供相关的网络服务，除此之外与相关网络服务有关的设备(如个人电脑、手机、及其他与接入互联网或移动网有关的装置)及所需的费用(如为接入互联网而支付的电话费及上网费、为使用移动网而支付的手机费)均应由用户自行负担。
						
						三、用户帐号
						3.1 经本站注册系统完成注册程序并通过身份认证的用户即成为正式用户，可以获得本站规定用户所应享有的一切权限；未经认证仅享有本站规定的部分会员权限。本站有权对会员的权限设计进行变更。
						3.2 用户只能按照注册要求使用真实姓名，及身份证号注册。用户有义务保证密码和帐号的安全，用户利用该密码和帐号所进行的一切活动引起的任何损失或损害，由用户自行承担全部责任，本站不承担任何责任。如用户发现帐号遭到未授权的使用或发生其他任何安全问题，应立即修改帐号密码并妥善保管，如有必要，请通知本站。因黑客行为或用户的保管疏忽导致帐号非法使用，本站不承担任何责任。`,
							icon: "",
							btn: ["拒绝","同意协议"]
						}
					},
				]
			};
		},
		methods: {
			checkboxChange(item){
				this.checkColor = item
				console.log(item);
			},
			showmodel(item) {
				this.maskparam = item.maskparam
				this.mode = item.mode
				this.maskshow = true
			},
			finish(e) {
				this.maskshow = false
				console.log("输入了支付密码", e);
				uni.showToast({
					title: `密码为${e}`,
					icon: 'none',
					duration: 1500
				})
			},
			offmask(e) {
				this.maskshow = false
				console.log("关闭了弹窗", e);
				uni.showToast({
					title: `用户关闭了弹窗`,
					icon: 'none',
					duration: 1500
				})
			},
			clickbtn1() {
				this.maskshow = false
				console.log("点击了按钮1");
				uni.showToast({
					title: "用户点击了按钮一",
					icon: 'none',
					duration: 1500
				})
			},
			clickbtn2() {
				this.maskshow = false
				console.log("点击了按钮2");
				uni.showToast({
					title: "用户点击了按钮二",
					icon: 'none',
					duration: 1500
				})
			}
		},
	}
</script>

<style lang="scss">
	.cview {
		/* height: 60rpx;
		line-height: 60rpx; */
		/* padding: 0 10rpx; */
		.colorview {
			
			width: 35rpx;
			height: 35rpx;
			border: 1rpx soild #d6d6d6;
		}
	}
</style>
